<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'create2.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<link type="text/css" rel="stylesheet"
			href="${ctx}/css/themes/default/easyui.css">
		<link type="text/css" rel="stylesheet"
			href="${ctx}/css/themes/icon.css">
			<link rel="stylesheet" type="text/css" href="${ctx}/css/default.css" />
		<script type="text/javascript"
			src="${ctx}/scripts/jquery.easyui.min.js"></script>
		<script type="text/javascript"
			src="${ctx}/scripts/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript"
			src="${ctx}/scripts/jquery-1.4.4.min.js"></script>
		<script type="text/javascript"
			src="${ctx}/commons/upload/js/swfobject.js"></script>
		<script type="text/javascript"
			src="${ctx}/commons/upload/js/jquery.uploadify.v2.1.4.js"></script>
	

<style type="text/css">  

.odd {    

 background-color: 

 #ffc;     

 }    

 .even  

{    

 background-color: #cef;     

 }    

 .highlight {font&shy;weight:bold&#894; color:  

 #f00&#894;}  

table{margin:0 auto;}  

 td{  

 width:250px;}  

 </style>  



	</head>

	<script type="text/javascript"> 
function test(obj){
    alert(obj.checked);
    
      $("input[name^='"+obj.name+"']").attr("checked","true"); 
}

$(function($){ 
$("input[name='checkbox']").click(function(){  
    alert(1111);
       $("input[name^='"+obj.name+"']").attr("checked","true"); 
})  ;

//全选 
$("#btn1").click(function(){ 
$("#chktable").append("<tr><td><input type='checkbox' onclick = 'javascript:test(this)' name='checkbox_dept_1' id='cbidx' value='fuck'/><label for='cbidx'>部门01</label></td><td><input type='checkbox' name='checkbox_dept_1_1' id='cbidx'/><label for='cbidx'>人员01</label><br><input name='checkbox' type='checkbox' id='cbidx'/><label for='cbidx'>人员02</label><input type='checkbox' name='checkbox_dept_1_3' id='cbidx'/><label for='cbidx'>人员03</label></td></tr>");

$("input[name='checkbox']").attr("checked","true"); 
}) 
//取消全选 
$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
}) 
//选中所有基数 
$("#btn3").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
}) 
//选中所有偶数 
$("#btn6").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
}) 

//选中所有偶数 
$("#btn11").click(function(){ 
 alert();
 $("input[name='checkbox^']").attr("checked","true");

}) 

//反选 
$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
}) 
//或许选择项的值 
var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
alert(aa);
//document.write(aa); 
}) 
}) 

	$(document).ready(function(){
	var $likebox=$("[name^=like]:checkbox");//把复选框组赋给一个变量；
	var	$allcheck=$(":checkbox[name=allcheck]")//把全选复选框赋给一个变量；
		function checks(){
			var flag=true;
			$likebox.each(function(){
				if(!this.checked){
					flag=false;
					}
				$allcheck.attr("checked",flag);
			});
		}		//首先定义一个自定义函数，此函数的功能是：检查复选框数组中的选中状态；并更具他的每一个复选框的选中状态来，定义全选复选框是否选中；

		$allcheck.click(function(){
			$likebox.attr("checked",this.checked);
		});		//为全选框绑定一个单击事件；并通过点击它来选中或取消复选框组

		$likebox.click(function(){checks();});
		//为复选框组中的每个元素绑定一个点击事件，并且调用自定义函数来判断，并通过每个元素的状态来定义全选按钮的状态；
		$(".allcheck").bind("click",function(){
			$likebox.attr("checked",true);
			checks();
		});		//为全选按钮绑定一个点击事件，并调用自定义函数来判断；
		$(".nocheck").click(function(){
			$likebox.attr("checked",false);
			checks();
		});		//为取消按钮绑定一个点击事件，并调用自定义函数判断；
		$(".recheck").click(function(){
			$likebox.each(function(){
				this.checked=!this.checked;
			});
			checks();
		});	//为反选钮绑定一个点击事件，并调用自定义函数判断；
		$(".enter").click(function(){
			var str="您选中的项目是：\n";
			$("[name=like]:checkbox:checked").each(function(){
				str+=$(this).val()+"\n";
			});
			alert(str);
		});	//为提交钮绑定一个点击事件，并通过得到的以选中按钮来输出被选中的项的值；
	});

</script>
	</head>
	<body>

		<table id="chktable">


		</table>
		<form id="form1" runat="server">
			<div>
				<input type="button" id="btn1" value="全选">
				<input type="button" id="btn2" value="取消全选">
				<input type="button" id="btn3" value="选中所有奇数">
				<input type="button" id="btn6" value="选中所有偶数">
				<input type="button" id="btn4" value="反选">
				<input type="button" id="btn5" value="获得选中的所有值">
				<input type="button" id="btn11" value="试验">
				<br>
				<input type="checkbox" id="x" name="checkbox" value="checkbox1">
				checkbox1
				<input type="checkbox" id="x" name="checkbox" value="checkbox2">
				checkbox2
				<input type="checkbox" id="x" name="checkbox" value="checkbox3">
				checkbox3

				<input type="checkbox" id="x" name="checkbox" value="checkbox4">
				checkbox4
				<input type="checkbox" id="x" name="checkbox" value="checkbox5">
				checkbox5
				<input type="checkbox" id="x" name="checkbox" value="checkbox6">
				checkbox6
				<input type="checkbox" id="x" name="checkbox" value="checkbox7">
				checkbox7
				<input type="checkbox" id="x" name="checkbox" value="checkbox8">
				checkbox8
				<input type="checkbox" id="x" name="checkbox1" value="checkbox11">
				<input type="checkbox" id="x" name="checkbox1" value="checkbox12">
				<input type="checkbox" id="x" name="checkbox1" value="checkbox13">
			</div>
		</form>



		<table border="0">
			<tr>
				<td>
					选择您喜欢的选项：
					<input type="checkbox" name="allcheck">
					全选/取消
				</td>
			</tr>
			<tr>
				<td>
					<label>
						羽毛球：
					</label>
					<input type="checkbox" name="like" value="羽毛球">
					&nbsp;&nbsp;&nbsp; 篮球：
					<input type="checkbox" name="like" value="篮球">
					&nbsp;&nbsp;&nbsp; 棒球：
					<input type="checkbox" name="like" value="棒球">
					&nbsp;&nbsp;&nbsp; 高尔夫：
					<input type="checkbox" name="like" value="高尔夫">
					&nbsp;&nbsp;&nbsp; 足球：
					<input type="checkbox" name="like" value="足球">
					&nbsp;&nbsp;&nbsp;
					<br>
					地球：
					<input type="checkbox" name="likex" value="足球">
					&nbsp;&nbsp;&nbsp;
					<br>
				</td>
			</tr>
			<tr>
				<td>
					<input type="button" class="allcheck" value="全选">
					<input type="button" class="nocheck" value="取消">
					<input type="button" class="recheck" value="反选">
					<input type="button" class="enter" value="提交">
				</td>
			</tr>
		</table>


	</body>
</html>

